<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deepseek API 调用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 如果需要Tailwind CSS，确保添加相应的CDN链接 -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> -->
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div id="app" class="bg-white p-8 rounded-lg shadow-lg w-full max-w-4xl">
    <h1 class="text-3xl font-bold text-center mb-6">Deepseek API 调用</h1>
    <div class="space-y-6">
        <div>
            <label for="inputText" class="block text-sm font-medium text-gray-700">输入内容</label>
            <textarea id="inputText" rows="4" v-model="inputText" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" placeholder="请输入要处理的内容..."></textarea>
        </div>
        <div class="flex justify-center">
            <button id="submitBtn" @click="callDeepseekApi" class="bg-indigo-600 text-white px-6 py-2 rounded-md hover:bg-indigo-700 transition duration-300">提交</button>
        </div>
        <div>
            <label for="responseText" class="block text-sm font-medium text-gray-700">返回内容</label>
            <textarea id="responseText" v-model="response" rows="8" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" readonly></textarea>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            inputText: '',
            response: ''
        },
        methods: {
            callDeepseekApi() {
                axios.get('/ai/qianfan', {
                    params: {
                        input: this.inputText
                    }
                })
                    .then(response => {
                        this.response = JSON.stringify(response.data, null, 2); // 格式化JSON输出，便于阅读
                    })
                    .catch(error => {
                        console.error('请求失败:', error);
                        this.response = '请求失败，请检查您的输入或网络状况。';
                    });
            }
        }
    });
</script>
</body>
</html>
